<template>
  <el-dialog :close-on-click-modal="false" title="追加责任" width="800px" :visible.sync="visible">
    <el-form :model="form" ref="form" label-width="80px" :rules="rules">
      <el-form-item label="责任对象" prop="targetMode">
        <el-radio-group v-model="form.targetMode">
          <el-radio :label="1">科室</el-radio>
          <el-radio :label="2">个人</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="对象名称" prop="targetName">
        <el-cascader
          v-if="form.targetMode === null"
          v-model="form.targetId"
          class="cascaderLm"
          style="width: 100%"
          :options="[]"
          :props="props"
          collapse-tags
          clearable
        />
        <el-cascader
          v-if="form.targetMode === 1"
          v-model="form.targetId"
          class="cascaderLm"
          style="width: 100%"
          :options="deptOptions"
          :props="props"
          collapse-tags
          clearable
          filterable
        />
        <el-cascader
          v-if="form.targetMode === 2"
          v-model="form.targetId"
          class="cascaderLm"
          style="width: 100%"
          :options="userOptions"
          :props="props"
          collapse-tags
          filterable
          clearable
        />
        <!-- <el-input placeholder="请输入对象名称"  /> -->
      </el-form-item>
      <el-form-item label="奖惩形式" prop="rewardOrientation">
        <el-radio-group v-model="form.rewardOrientation">
          <!-- 奖的情况，加分时，既可加分又可奖钱。奖钱时，只能奖钱 -->
          <template v-if="mdl.rewardType ===1 && mdl.rewardOrientation === 1">
            <el-radio :label="1" v-show="reward">加分</el-radio>
            <el-radio :label="2" v-show="reward">奖钱</el-radio>
          </template>
          <template v-if="mdl.rewardType ===1 && mdl.rewardOrientation === 2">
            <el-radio :label="2" v-show="reward">奖钱</el-radio>
          </template>
          <template v-if="mdl.rewardType ===2 && mdl.rewardOrientation === 1">
            <el-radio :label="1" v-show="reward">扣分</el-radio>
            <el-radio :label="2" v-show="reward">罚钱</el-radio>
          </template>
          <template v-if="mdl.rewardType ===2 && mdl.rewardOrientation === 2">
            <el-radio :label="2" v-show="reward">罚钱</el-radio>
          </template>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="奖惩值" prop="rewardValue">
        <el-input v-model.number="form.rewardValue" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSure">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDeptTree } from '@/api/department'
import { allUser } from '@/api/manage'

export default {
  data() {
    var rewardValueRule = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('需要输入一个大于0的数字'))
      }
      if (this.mdl.rewardType === 1) {
        if (this.mdl.rewardUpLimit) {
          // 有值，不为null时
          if (value > this.mdl.rewardUpLimit) {
            callback(new Error('奖惩类型为奖时，奖惩值不能超过奖惩上限'))
            this.$set(this.form, 'rewardValue', this.mdl.rewardUpLimit)
          } else {
            callback()
          }
        } else {
          callback()
        }
      } else if (this.mdl.rewardType === 2) {
        if (this.mdl.rewardLowLimit) {
          if (value > Math.abs(this.mdl.rewardLowLimit)) {
            callback(new Error('奖惩类型为惩时，奖惩值不能小于奖惩下限，为正值'))
            this.$set(this.form, 'rewardValue', Math.abs(this.mdl.rewardLowLimit))
          } else {
            callback()
          }
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      props: { multiple: true },
      deptOptions: [],
      userOptions: [],
      visible: false,
      form: {
        targetMode: null,
        targetId: null,
        targetName: [],
        rewardOrientation: null,
        rewardValue: null,
        spec: null
      },
      rules: {
        targetMode: [{ required: true, message: '请选择责任对象', trigger: 'blur' }],
        targetName: [{ required: true, message: '请输入对象名称', trigger: 'blur' }],
        rewardOrientation: [{ required: true, message: '请选择奖惩形式', trigger: 'blur' }],
        rewardValue: [
          { required: true, validator: rewardValueRule, message: '请输入奖惩值', trigger: 'blur' },
          { type: 'number', message: '请输入一个数字' }
        ],
        remark: []
      },
      mdl: {},
      reward: true
    }
  },
  computed: {
    getTargetMode() {
      return this.form.targetMode
    }
  },
  // watch: {
  //   getTargetMode: {
  //     handler(n, o) {
  //       if (n !== o) {
  //         console.log('targetMode n', n)
  //         this.$set(this.form, 'targetName', null)
  //       }
  //     },
  //     deep: true
  //   }
  // },
  mounted() {
    this.getDeptTree()
    this.getUser()
  },
  methods: {
    getDeptTree() {
      getDeptTree().then(res => {
        const arr = res.data
        arr.map(v => {
          v.label = v.title
          if (v.children && v.children.length > 0) {
            v.children.map(j => {
              j.label = j.title
              if (j.children && j.children.length > 0) {
              } else {
                delete j.children
              }
            })
          } else {
            delete v.children
          }
        })
        this.$nextTick(() => {
          this.deptOptions = arr
        })
      })
    },
    getUser() {
      allUser().then(res => {
        const arr = res.data
        arr.map(v => {
          v.label = v.name
          v.value = v.userId
        })
        this.$nextTick(() => {
          this.userOptions = arr
        })
      })
    },
    show(obj) {
      this.visible = true
      this.mdl = Object.assign({}, obj)
      if (this.mdl.rewardType === 1 && this.mdl.rewardOrientation === 2) {
        this.$set(this.form, 'rewardOrientation', 2)
      }
      if (this.mdl.rewardType === 2 && this.mdl.rewardOrientation === 2) {
        this.$set(this.form, 'rewardOrientation', 2)
      }
    },
    handleSure() {
      console.log('targetId', this.form.targetId)
      let arr = []
      let id = []
      if (this.form.targetMode === 1) {
        this.deptOptions.map(v => {
          this.form.targetId.map(j => {
            // 部门只有一级结构的
            if (v.key === j[0]) {
              if (v.children && j.length > 1) {
                // 部门有二级结构的，匹配父ID，再匹配里面的children
                v.children.map(a => {
                  if (a.key === j[1]) {
                    arr.push(a.title)
                    id.push(a.key)
                  }
                })
              } else {
                arr.push(v.title)
                id.push(v.key)
              }
            }
          })
        })
      } else {
        this.userOptions.map(v => {
          this.form.targetId.map(j => {
            if (v.userId === j[0]) {
              arr.push(v.name)
              id.push(v.userId)
            }
          })
        })
      }
      this.$set(this.form, 'targetName', arr)
      this.$set(this.form, 'targetId', id)
      this.$set(this.form, 'spec', new Date().getTime() + id.join(','))

      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.form)

          this.$emit('postTable', this.form)
          this.visible = false
          this.$nextTick(() => {
            this.$refs.form.resetFields()
          })
        }
      })
    }
  }
}
</script>

<style>
.el-cascader__dropdown .el-cascader-panel {
  max-height: 200px;
}
</style>